<template>
  <el-row class="topBar">
    <el-col :span="4" :offset="5">
        <i class="el-icon-menu"></i>
        &nbsp;
        <el-link :underline="false">小米商城</el-link>
    </el-col>
    <el-col v-if="isLogined" :span="2" :offset="4">
      <div class="topBar_item">
        <i class="el-icon-user"></i>
        <span> {{topBarContentRight}}</span>
      </div>

    </el-col>
      <el-col v-else :span="2" :offset="5">
        <div class="topBar_item">
        <el-link :underline="false" @click="loginOrRegisterClick">登录/注册</el-link>
        </div>
      </el-col>
    <el-col v-if="isLogined" :span="2" :offset="0"><div class="topBar_item"><el-link :underline="false" @click="logoutClick">退出登录</el-link></div></el-col>
    <el-col  :span="2"><div class="topBar_item"><el-link :underline="false" @click="orderClick">我的订单</el-link></div></el-col>
    <el-col :span="4" :offset="1">
      <div class="topBar_item">
      <el-link :underline="false" @click="shopcartClick">
      <i class="el-icon-shopping-cart-2"></i>
      <span>购物车</span>
      ({{this.$store.state.shopcartCount}})
      </el-link>
      </div>
    </el-col>

  </el-row>
</template>

<script>
  import {login} from "../../network/login";

  export default {
    name: "topBar",
    data(){
      return{
        num: 0
      }
    },
    computed:{
      isLogined(){
        let username = this.$store.state.username;
        if(username !== null && username !== ""){
         return true;
        }else{
          return  false;
        }
      },
      topBarContentRight(){
        let username = this.$store.state.username;
        if(username !== null && username !== ""){
          return username;
        }else{
          return ""
        }
      },

    },


    methods:{
      //退出登录
      logoutClick(){
        console.log("=======退出登录=========");
        let that = this;
          //发送退出登录请求
          login({
            url: '/user/logout',

          }).then(res=>{
            //退出登录 逻辑， 清除vuex中的信息和 localStoage里面的信息
            console.log(res, '退出登录');
              that.$store.commit('logout');
              //将isLogined 置为false
              that.isLogined = false;
          });
      },

      // 跳转登录注册页面
      loginOrRegisterClick(){
        console.log("跳转登录页面");
        this.$router.push('/login');
      },

      //跳转购物车页面
      shopcartClick(){
        console.log("跳转购物车页面");
        this.$router.push("/index/shopcart");
      },

      //跳转订单页面
      orderClick(){
        this.$router.push("/index/order");
      }

    }
  }
</script>

<style scoped>
  .topBar{
    /*width: 100%;*/
    background-color: #333;
    color: #B0B0B0;
    height: 60px;
    line-height: 60px;
    align-content: center;
  }
  .topBar :hover{
    color: white;
  }

  .topBar_item{
    width: 100%;
  }

</style>
